<template>
  <el-card
    style="height: 100%; position: relative; overflow: visible !important"
  >
    <template #header>
      <div class="header">
        <span>任务流转</span>
      </div>
    </template>
    <div class="content">
      <header>
        <div class="content-img">
          <img src="@/assets/images/46.png" alt="" />
        </div>
        <div class="content-rig">
          <div class="content-rig-title">巡察任务节点流程</div>
          <div class="content-rig-category">
            风险类别：{{ props.detailInfo.riskType || '' }}
          </div>
          <div class="content-rig-level">
            风险级别：
            <span class="pri" v-if="props.detailInfo.riskLevel === '一级'"
              >1</span
            >
            <span class="warning" v-if="props.detailInfo.riskLevel === '二级'"
              >2</span
            >
            <span class="error" v-if="props.detailInfo.riskLevel === '三级'"
              >3</span
            >
          </div>
        </div>
      </header>
      <div class="list">
        <template v-if="info.length === 0">
          <div class="list-item">
            <div class="list-item-line">
              <div class="circle"></div>
              <div class="line"></div>
            </div>
            <div class="list-item-rig">
              <div class="list-item-rig-status">发起人</div>
            </div>
          </div>
        </template>
        <template v-for="(it, index) in info">
          <div
            class="list-item curpointer"
            v-if="it.nodeType === 'start'"
            @click="
              props.detailInfo.flowStatus === 2 ? setCommentsVisible(it) : ''
            "
          >
            <div class="list-item-line">
              <!--<div class="circle"></div>-->
              <img src="@/assets/imgs/spotCheck/gou.svg" alt="" class="icon" />
              <div class="line" v-if="info.length > 0"></div>
            </div>
            <div class="list-item-rig">
              <div class="list-item-rig-status">发起人</div>
              <div class="list-item-rig-time">
                {{ it.time || '' }}
              </div>
              <div class="list-item-rig-author">提交人：{{ it.nickName }}</div>
              <template v-for="item in it.comment">
                <div class="list-item-rig-comments">
                  {{ item.nickName }}（追加评论）
                </div>
                <div class="list-item-rig-content">{{ item.comment }}</div>
              </template>
            </div>
          </div>
          <template v-if="it.nodeType === 'approval' || it.nodeType === 'back'">
            <div
              class="list-item curpointer"
              @click="
                props.detailInfo.flowStatus === 2 ? setCommentsVisible(it) : ''
              "
            >
              <div class="list-item-line">
                <div class="circle" v-if="it.flowStatus === 1"></div>
                <img
                  src="@/assets/imgs/spotCheck/gou.svg"
                  alt=""
                  class="icon"
                  v-if="it.flowStatus === 3 || it.flowStatus === 5"
                />
                <img
                  src="@/assets/imgs/spotCheck/cha.svg"
                  alt=""
                  class="icon"
                  v-if="it.flowStatus === 2 || it.flowStatus === 4"
                />
                <div
                  class="line"
                  v-if="!(it.flowStatus === 3 && info.length - 1 === index)"
                ></div>
              </div>
              <div class="list-item-rig">
                <div class="list-item-rig-status">
                  {{ getStatus(it.flowStatus) }}
                </div>
                <div class="list-item-rig-time">{{ it.time || '' }}</div>
                <div class="list-item-rig-author">
                  {{ it.flowStatus === 1 ? '审核人' : '提交人' }}：{{
                    it.flowStatus === 1 ? it.allFlowUser : it.nickName || ''
                  }}
                </div>
                <template v-if="it.flowStatus === 2 || it.flowStatus === 4">
                  <div class="list-item-rig-comments">
                    {{
                      it.flowStatus === 4
                        ? '退回意见'
                        : it.flowStatus === 2
                        ? '驳回原因'
                        : '描述'
                    }}
                  </div>
                  <div class="list-item-rig-content">{{ it.remark }}</div>
                </template>
                <template v-else>
                  <div class="list-item-rig-comments">
                    描述：{{ it.remark }}
                  </div>
                </template>
                <template v-for="item in it.comment">
                  <div class="list-item-rig-comments">
                    {{ item.nickName }}（追加评论）
                  </div>
                  <div class="list-item-rig-content">{{ item.comment }}</div>
                </template>

                <div
                  class="list-item-rig-files"
                  v-if="it.files"
                  @click.stop="previewHandler(it.files)"
                >
                  <div v-for="item in it.files">
                    <span>{{ item.fileName }}</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-if="it.nodeType === 'end'">
            <div class="list-item">
              <div class="list-item-line">
                <div class="circle"></div>
                <div class="line" v-if="info.length > index + 1"></div>
              </div>
              <div class="list-item-rig">
                <div class="list-item-rig-status">审核通过</div>
                <div class="list-item-rig-time">{{ it.time || '' }}</div>
                <div class="list-item-rig-author">
                  提交人：{{ it.nickName || '' }}
                </div>
              </div>
            </div>
          </template>
        </template>
        <template
          v-if="info.length > 0 && [1].includes(props.detailInfo.flowStatus)"
        >
          <div class="list-item">
            <div class="list-item-line">
              <div class="circle"></div>

              <div class="line"></div>
            </div>
            <div class="list-item-rig">
              <div class="list-item-rig-status">发起人</div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div
      :class="commentsVisible ? 'comemts comemts-ac' : 'comemts'"
      v-if="!props.isView"
    >
      <div class="input">
        <el-input
          v-model="commentForm.comment"
          class="custom-input"
          type="textarea"
          placeholder="请输入评论"
        />
      </div>
      <div class="send">
        <img src="@/assets/imgs/spotCheck/send.png" alt="" @click="send" />
      </div>
    </div>
    <div
      class="btns"
      v-if="
        (props.detailInfo.flowStatus === 2 ||
          props.detailInfo.flowStatus === 3) &&
        !props.isView
        && props.type === 2
      "
    >
      <div class="left">
        <img
          src="@/assets/imgs/spotCheck/comments.png"
          alt=""
          style="width: 26px; height: 24px; margin-right: 30px"
          @click="setCommentsVisible(info[info.length - 1])"
          v-if="props.detailInfo.flowStatus === 2"
        />
        <div
          style="position: relative"
          v-if="
            props.detailInfo.flowStatus === 3 ||
            props.detailInfo.flowStatus === 2
          "
        >
          <img
            src="@/assets/imgs/spotCheck/zd.png"
            alt=""
            style="width: 27px; height: 20px"
            @click="open"
          />
          <div :class="visible ? 'select select-visible' : 'select'">
            <div
              class="select-item"
              @click="transmitted"
              v-if="props.detailInfo.flowStatus === 2"
            >
              转交
            </div>
            <div
              class="select-item"
              @click="returnStatusClick"
              v-if="props.detailInfo.flowStatus === 3"
            >
              退回
            </div>
          </div>
        </div>
      </div>
      <div class="rig" v-if="props.detailInfo.flowStatus === 2">
        <el-button type="danger" @click="setTaskFlowFialogRef(0)"
          >拒绝</el-button
        >
        <el-button type="primary" @click="setTaskFlowFialogRef(1)">
          确定
        </el-button>
      </div>
    </div>
  </el-card>
  <TaskFlowFialog ref="TaskFlowFialogRef" @reload="reload" />
  <ReturnStatus ref="ReturnStatusRef" @reload="reload" />
  <MFileList ref="mfileList" :fileData="fileData" />
  <!-- 转交 -->
  <TransmittedPopup ref="transmittedPopupRef" @reload="reload" />
</template>

<script setup lang="ts">
import { SuccessFilled } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import {
  handlerFlow,
  handlerFlowHistory,
  problemConfirm,
  handlerAddComment
} from '@/api/spotCheck/spotCheck'
import { ElMessageBox, ElMessage } from 'element-plus'
import TaskFlowFialog from './task-flow-dialog.vue'
import ReturnStatus from './returnStatus.vue'
import TransmittedPopup from './transmittedPopup.vue'
const router = useRouter()
const route = useRoute()

const props = defineProps(['detailInfo', 'isView', 'type'])
const emit = defineEmits(['reload'])

const reload = () => {
  emit('reload')
}

const ReturnStatusRef = ref()
const returnStatusClick = () => {
  ReturnStatusRef.value.show(info.value[0].taskId)
}

const mfileList = ref()
const fileData = ref<any[]>([])
const previewHandler: any = (file: any[]) => {
  file = file.map((i) => ({
    ...i,
    name: i.fileName,
    url: i.fileUrl
  }))
  fileData.value = file
  mfileList.value.detailsVisible = true
}

//	0待整改 1待审核 2审核不通过 3已完成 4退回+
const status = {
  0: '待整改',
  1: '待审核',
  2: '审核不通过',
  3: '审核通过',
  4: '退回',
  5: '已转交'
}
const getStatus = (type) => {
  let name = ''
  try {
    name = status[type]
  } catch (e) {}
  return name
}

// onMounted(() => {
//   init()
// })

const info = ref('')
const init = () => {
  handlerFlowHistory({ sorgRiskHandleId: route.query.id }).then((res) => {
    info.value = res.data || []
  })
}
//返回
const goBack = () => {
  router.go(-1)
}

const visible = ref(false)
const open = () => {
  commentsVisible.value = false
  visible.value = !visible.value
}

//评论
const commentForm = ref({
  comment: '',
  sorgRiskHandleRecordId: '',
  taskId: ''
})
const commentsVisible = ref(false)
const setCommentsVisible = (it = '') => {
  console.log('it=>', it)
  commentForm.value.comment = ''
  if (it) {
    commentForm.value.sorgRiskHandleRecordId = it.sorgRiskHandleRecordId
    commentForm.value.taskId = it.taskId
  }
  visible.value = false
  commentsVisible.value = !commentsVisible.value
}

const send = () => {
  if (commentForm.value.comment === '') {
    ElMessage.error('请输入评论')
    return false
  }
  handlerAddComment(commentForm.value).then((res) => {
    reload()
    init()
    visible.value = false
    commentsVisible.value = false
  })
}

defineExpose({ init })

const sure = (status) => {
  ElMessageBox.confirm(
    status === 1 ? '是否进行确认？' : '是否退回？',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      handlerFlow({
        status,
        sorgRiskHandleId: route.query.id,
        remark: ''
      }).then((res) => {
        emit('reload')
        router.go(-1)
      })
    })
    .catch(() => {})
}
const transmittedPopupRef = ref()
const transmitted = () => {
  transmittedPopupRef.value.show(info.value[0].taskId)
  // ElMessageBox.confirm('是否进行转交', '温馨提示', {
  //   confirmButtonText: '确定',
  //   cancelButtonText: '取消',
  //   type: 'warning'
  // })
  //   .then(() => {
  //     handlerFlow({
  //       sorgRiskHandleId: route.query.id,
  //       remark: ''
  //     }).then((res) => {
  //       emit('reload')
  //     })
  //   })
  //   .catch(() => {})
}

const TaskFlowFialogRef = ref()
const setTaskFlowFialogRef = (type) => {
  TaskFlowFialogRef.value.show(type, route.query.id)
}
</script>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
  .icon {
    margin-right: 16px;
    cursor: pointer;
  }
  span {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 500;
    font-size: 20px;
    color: #333333;
  }
}
header {
  width: 100%;
  display: flex;
  padding: 20px 30px;
  box-sizing: border-box;
  border-bottom: 1px solid #e9e9e9;
  .content-img {
    width: 68px;
    height: 68px;
    margin-right: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .content-rig {
    flex: 1;
    min-width: 0;
    .content-rig-title {
      font-weight: 400;
      font-size: 18px;
      color: #999999;
      margin-bottom: 7px;
    }
    .content-rig-category {
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      margin-bottom: 4px;
    }
    .content-rig-level {
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      display: flex;
      align-items: center;
      span {
        width: 15px;
        height: 15px;
        font-weight: 400;
        font-size: 10px;
        color: #ffffff;
        display: inline-flex;
        justify-content: center;
        align-items: center;
      }
      .error {
        background: red;
        border-radius: 50%;
      }
      .warning {
        background: #ffaa00;
        border-radius: 50%;
      }
      .pri {
        background: #1c85ff;
        border-radius: 50%;
      }
    }
  }
}
:deep(.el-card__body) {
  padding: 0px;
}
.list {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 21px;
  padding-bottom: 250px;
  overflow-y: scroll;
  .list-item {
    width: 100%;
    display: flex;
    min-height: 100px;
    .list-item-line {
      width: 16px;
      height: auto;
      display: inline-flex;
      justify-content: center;
      margin-right: 20px;
      position: relative;
      .line {
        position: relative;
        background: repeating-linear-gradient(
          to bottom,
          #999999,
          #999999 3px,
          #999999 6px,
          transparent 6px,
          transparent 9px
        );
        height: 100%; /* 设置元素的高度为1像素 */
        width: 1px; /* 设置元素的宽度为100% */
      }
      .circle {
        width: 8px;
        height: 8px;
        border: 4px solid #999999;
        border-radius: 50%;
        position: absolute;
        background: white;
        top: 0;
        left: 0;
        z-index: 2;
      }
      .icon {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        position: absolute;
        background: white;
        top: 0;
        left: 0;
        z-index: 2;
      }
    }
    .list-item-rig {
      flex: 1;
      min-width: 0;
      padding-bottom: 20px;
      .list-item-rig-status {
        font-weight: 500;
        font-size: 18px;
        color: #333333;
      }
      .list-item-rig-time {
        font-weight: 400;
        font-size: 16px;
        color: #999999;
        margin-top: 4px;
      }
      .list-item-rig-author {
        font-weight: 400;
        font-size: 16px;
        color: #999999;
        margin-top: 4px;
      }
      .list-item-rig-comments {
        font-weight: 400;
        font-size: 16px;
        color: #999999;
        margin-top: 10px;
      }
      .list-item-rig-content {
        background: #f5f6f8;
        width: 100%;
        font-weight: 400;
        font-size: 16px;
        color: #999999;
        box-sizing: border-box;
        padding: 10px 20px;

        margin-top: 10px;
      }
      .list-item-rig-files {
        width: 100%;
        & > div {
          width: 100%;
          padding-bottom: 2px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-top: 10px;
          color: #1c85ff;
          cursor: pointer;
        }
      }
    }
  }
}
.btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-top: 1px solid #e9e9e9;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  .left {
    display: flex;
    position: relative;
    img {
      cursor: pointer;
    }
    .select {
      width: 90px;
      background: #ffffff;
      border: 1px solid #e9e9e9;
      position: absolute;
      opacity: 0;
      bottom: 37px;
      left: 50%;
      transform: translateX(-50%);
      transition: opacity 0.2s linear;
      .select-item {
        height: 42px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 400;
        font-size: 15px;
        color: #666666;
        cursor: pointer;
      }
      .select-item-ac {
        background: #e9f2ff;
      }
      .select-item:hover {
        background: #e9f2ff;
      }
    }
    .select-visible {
      opacity: 1;
    }
  }
}
.comemts {
  width: 360px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #1c85ff;
  position: absolute;
  opacity: 0;
  transition: opacity 0.2 linear;
  bottom: 100px;
  left: 0;
  right: 0;
  margin: auto;
  box-sizing: border-box;
  padding: 10px 10px 0;
  .input {
    width: 100%;
    input {
      font-weight: 400;
      font-size: 16px;
      color: #333333;
    }
  }
  .send {
    padding: 10px 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    img {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
  }
}
.comemts-ac {
  opacity: 1;
}
.custom-input {
  width: 100%;
  height: 100%;
}
:deep(.custom-input .el-textarea__inner) {
  border: none;
  box-shadow: none;
  resize: none; /* 可选：如果你还想移除拖动改变大小的功能 */
}
.curpointer {
  cursor: pointer;
}
</style>
